<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            padding: 10px;
        }

        .button-group {
            margin-bottom: 20px;
        }

        .button-group button {
            padding: 2.5px 5px;
        }

        .slide {
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            position: relative;
        }

        .slide .ball {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
            position: absolute;
            left: 0px;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="button-group">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slide">
            <div class="ball"></div>
        </div>
    </div>

</body>
<script>

    // JS运动  => 本质: 没隔固定时间,控制元素移动指定距离

    // a.  没隔固定时间 => 计时器
    // b.  改变元素的位置 (margin position transform  -> position)


    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var back = document.getElementsByClassName("back")[0];

    var slide = document.getElementsByClassName("slide")[0];
    var ball = document.getElementsByClassName("ball")[0];

    var maxLeft = slide.clientWidth - ball.clientWidth;

    var timer = null;

    // 起始位置:0
    // 终止位置:1000
    // 运动的距离: 1000 - 0  => 1000
    // 每次跑10px  (是速度的整数倍) => 100次  
    // 每次跑9px   (不是速度的整数倍) => 111次(999px) 不满足(在跑一次 1008 超出) 

    // 解决方法
    // 1.  超出终点就停止 
    //     cur >= end    (正向运动 终点值 > 起点值: 0 -> 1000 )   
    //     cur <= end    (反向运动 终点值 < 起点值: 1000 -> 0 ) 
    //    可以 但是要考虑正向运动 还是反向运动

    // 2. 理想情况下 cur == end  => 但是如果需要 运动的距离 不是 速度的整数倍 =>无法停止
    // 解决方法 设置误差允许范围
    //   Math.abs(cur - end)  <  Math.abs(speed);

    // 起始位置:0
    // 终止位置:1000
    // 运动的距离: 1000 - 0  => 1000
    // 每次跑9px   (不是速度的整数倍) => 111次(999px)   |999-1000| <= |9| 再跑一次肯定超 => 没有必要跑了 =>直接清除计时器 直接到达终点




    // 0 -> 1000 正向运动 (终点值 > 起点值)
    start.onclick = function () {
        animate(ball, "left", "1000px", "fast");
    }

    pause.onclick = function () {
        clearInterval(timer);
    }


    // 1000 -> 0  反向运动 (终点值 < 起点值)
    back.onclick = function () {
        animate(ball, "left", "0", "slow");
    }




    // ele    运动的元素
    // cssKey  运动的css属性 ("left"  "top" "width" "height")
    // end     终点值
    // type    运动的方式  (slow  normal  fast)
    function animate(ele, cssKey, end, type = "normal") {
        // var cur = ele.offsetLeft;  // 1. 记录小球的起始位置(left)  2. 每次运动后小球的位置
        var cur = parseFloat(getStyle(ele, cssKey));  // 1. 记录小球的起始位置(left)  2. 每次运动后小球的位置
        end = parseFloat(end); //去单位 ("1000px" => 1000)

        var speed = 0;




        clearInterval(timer);
        timer = setInterval(function () {

            if (type == "normal") {
                // 匀速运动
                if (end > cur) {
                    speed = 20
                } else if (end < cur) {
                    speed = -20;
                } else {
                    speed = 0;
                }

            } else if (type == "fast") {
                // 加速运动
                if (end > cur) {  // 正向运动(0-1000   => speed正值)  
                    speed += 2;
                } else if (end < cur) { // 反向运动(1000 - 0   => speed负值) 
                    speed -= 2;
                } else {
                    speed = 0;
                }

            } else if (type == "slow") {
                // 缓冲运动
                // (终点值 - 当前位置)  => 剩余的距离
                // 剩余的距离 / 缓冲因子(n) => (每次剩余的n分之1)

                // 缓冲因子 => 一般在8-12之间

                if (end > cur) {
                    speed = (end - cur) / 10;  // speed >0 =>  可能会出现 0.00001
                    speed = Math.ceil(speed);  //  如果速度小于1  取  1
                } else if (end < cur) {
                    speed = (end - cur) / 10;  // speed < 0 =>  可能会出现-0.00001
                    speed = Math.floor(speed);  //  如果速度大于-1  取  -1
                } else {
                    speed = 0;
                }

            }


            // console.log(speed);


            cur += speed;  // 每次运动后小球的位置
            ele.style[cssKey] = cur + "px";

            if (Math.abs(cur - end) <= Math.abs(speed)) {  // 到达终点后停下
                clearInterval(timer);
                ele.style[cssKey] = end + "px";  // 直接到达终点
            }
        }, 10);
    }

    /* 获取非行内样式 */
    function getStyle(ele, cssKey) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele)[cssKey];
        } else {
            return ele.currentStyle[cssKey];
        }
    }

    console.log(parseFloat(getStyle(ball, "left")));



</script>

</html>